<template>
  <div class="mobile-table">
    <!-- 桌面端显示正常表格 -->
    <div v-if="!isMobile" class="desktop-table">
      <slot name="desktop-table"></slot>
    </div>

    <!-- 移动端显示卡片列表 -->
    <div v-else class="mobile-cards">
      <template v-if="treeProps">
        <!-- 树形结构渲染 -->
        <div
          v-for="(item, index) in data"
          :key="getRowKey ? getRowKey(item) : index"
          class="tree-root"
        >
          <TreeItem
            :data="item"
            :tree-props="treeProps"
            :level="0"
            :index="index"
            @toggle="handleToggle"
          >
            <template #content="{ row, level, index: nodeIndex }">
              <slot name="mobile-card" :row="row" :index="nodeIndex" :level="level"></slot>
            </template>
          </TreeItem>
        </div>
      </template>
      <template v-else>
        <!-- 普通列表渲染 -->
        <div 
          v-for="(item, index) in data" 
          :key="getRowKey ? getRowKey(item) : index"
          class="mobile-card"
        >
          <slot name="mobile-card" :row="item" :index="index"></slot>
        </div>
      </template>
      
      <!-- 移动端分页 -->
      <div v-if="showPagination" class="mobile-pagination">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useAppStore } from '@/stores/app'
import TreeItem from './TreeItem.vue'

defineOptions({
  name: 'MobileTable'
})

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  currentPage: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  },
  total: {
    type: Number,
    default: 0
  },
  showPagination: {
    type: Boolean,
    default: true
  },
  getRowKey: {
    type: Function,
    default: null
  },
  treeProps: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['current-change', 'size-change', 'toggle-expand'])

const appStore = useAppStore()
const isMobile = computed(() => appStore.device === 'mobile')

const handleCurrentChange = (page) => {
  emit('current-change', page)
}

const handleSizeChange = (size) => {
  emit('size-change', size)
}

const handleToggle = (row, expanded) => {
  emit('toggle-expand', row, expanded)
}
</script>

<style lang="scss" scoped>
.mobile-table {
  .desktop-table {
    display: block;
  }

  .mobile-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;

    .mobile-card {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      border: 1px solid #f0f0f0;
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        transform: translateY(-1px);
      }
    }

    .tree-root {
      margin-bottom: 8px;
    }
  }

  .mobile-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;

    :deep(.el-pagination) {
      .el-pager li {
        min-width: 32px;
        height: 32px;
        line-height: 32px;
        margin: 0 2px;
      }

      .btn-prev,
      .btn-next {
        min-width: 32px;
        height: 32px;
        line-height: 32px;
      }
    }
  }
}
</style>
